<template>
  <div class="center_top">
    <Echart :options="options" id="bottomLeftChart" class="echarts_bottom"></Echart>
  </div>
</template>

<script>
import { graphic } from "echarts";
export default {
  data() {
    return {
      options: {}
    };
  },
  props: {},
  watch: {
    "$store.state.setting.lastSEIASData.fuelPriceModel": {
      deep: true,
      handler(newValue, oldValue) {
        this.getData();
      }
    },
    "$store.state.setting.lastSEIASData.carbonPriceModel": {
      deep: true,
      handler(newValue, oldValue) {
        this.getData();
      }
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let res = {};
      res.category = this.$store.state.setting.lastSEIASData.selectOptions.deliveryYear;
      res.data = this.$store.state.setting.lastSEIASData.fuelPriceModel.concat({
        fuelType: "Carbon",
        price: this.$store.state.setting.lastSEIASData.carbonPriceModel
      });
      this.init(res);
    },
    init(newData) {
      let series = [];
      newData.data.forEach(item => {
        series.push({
          name: item.fuelType,
          data: item.price,
          type: "line",
          symbolSize: 8,
          // showAllSymbol: true,
          // symbol: "emptyCircle",
          // itemStyle: {
          //   borderRadius: 5
          // }
        });
      });
      this.options = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF"
          },
          formatter: function(params) {
            // 添加单位
            var result = params[0].name + "<br>";
            params.forEach(function(item) {
              result +=
                item.marker +
                " " +
                item.seriesName +
                " : " +
                Number(item.value).toFixed(2) +
                "</br>";
            });
            return result;
          }
        },
        legend: {
          // data: ["GHGIE target", "GHGIE actual"],
          textStyle: {
            color: "#B4B4B4"
          },
          top: "0"
        },
        grid: {
          left: "50px",
          right: "40px",
          bottom: "20px",
          top: "20px"
        },
        xAxis: {
          data: newData.category,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitLine: {
              lineStyle: {
                color: "#606060"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },

            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: series
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.center_top {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
